<template>
  <div class="app-container">
    <el-form ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="form-box">

      <el-form-item label="卦ID"
        :style="{ width: '50%' }"
        prop="guaId">
        <el-input v-model.trim="form.guaId"
          maxlength="50"
          placeholder="请输入卦名1-64">
        </el-input>
      </el-form-item>
      <el-form-item label="卦名"
        :style="{ width: '50%' }"
        prop="name">
        <el-input v-model.trim="form.name"
          maxlength="50"
          placeholder="请输入卦名">
        </el-input>
      </el-form-item>
      <el-form-item label="一句简介"
        :style="{ width: '50%' }"
        prop="breif">
        <el-input v-model.trim="form.breif"
          maxlength="50"
          placeholder="请输入简介">
        </el-input>
      </el-form-item>
      <el-form-item label="卦义或象征"
        maxlength="50"
        :style="{ width: '50%' }"
        prop="likes">
        <el-input v-model.trim="form.likes"
          maxlength="50"
          placeholder="请输入卦义或象征">
        </el-input>
      </el-form-item>

      <el-form-item label="拼音"
        :style="{ width: '50%' }"
        prop="pinYin">
        <el-input v-model.trim="form.pinYin"
          maxlength="50"
          placeholder="请输入拼音">
        </el-input>
      </el-form-item>
      <el-form-item label="名字描述"
        :style="{ width: '50%' }"
        prop="nameDesc">
        <el-input v-model.trim="form.nameDesc"
          maxlength="50"
          placeholder="请输入名字描述">
        </el-input>
      </el-form-item>
      <el-form-item label="级别"
        :style="{ width: '50%' }"
        prop="level">
        <el-select v-model="form.level"
          placeholder="请选择级别"
          clearable
          style="width: 100%">
          <el-option v-for="dict in dict.type.yj_guai_level"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="吉凶"
        :style="{ width: '50%' }"
        prop="jiXiong">
        <el-select v-model="form.jiXiong"
          placeholder="请选择级别"
          clearable
          style="width: 100%">
          <el-option v-for="dict in dict.type.yj_ji_xiong"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="用九"
        :style="{ width: '50%' }"
        prop="yongJiu">
        <el-input v-model.trim="form.yongJiu"
          maxlength="50"
          placeholder="请输入用九">
        </el-input>
      </el-form-item>
      <el-form-item label="卦德"
        :style="{ width: '50%' }"
        prop="de">
        <el-input v-model.trim="form.de"
          maxlength="50"
          placeholder="请输入卦德">
        </el-input>
      </el-form-item>
      <el-form-item label="卦联"
        :style="{ width: '100%' }"
        prop="lian">
        <el-input type="textarea"
          v-model="form.lian"
          maxlength="2000"
          placeholder="请输入卦联">
        </el-input>
      </el-form-item>
      <el-form-item label="象曰"
        :style="{ width: '100%' }"
        prop="xiang">
        <el-input type="textarea"
          v-model="form.xiang"
          maxlength="2000"
          placeholder="请输入象曰">
        </el-input>
      </el-form-item>
      <el-form-item label="象曰解释"
        :style="{ width: '100%' }"
        prop="xiangDesc">
        <el-input type="textarea"
          v-model="form.xiangDesc"
          maxlength="2000"
          placeholder="请输入象曰解释">
        </el-input>
      </el-form-item>
      <el-form-item label="卦词"
        :style="{ width: '100%' }"
        prop="ci">
        <el-input type="textarea"
          v-model="form.ci"
          maxlength="2000"
          placeholder="请输入卦词">
        </el-input>
      </el-form-item>
      <el-form-item label="卦词解释"
        :style="{ width: '100%' }"
        prop="ciDesc">
        <el-input type="textarea"
          v-model="form.ciDesc"
          maxlength="2000"
          placeholder="请输入卦词解释">
        </el-input>
      </el-form-item>
      <el-form-item label="彖曰"
        :style="{ width: '100%' }"
        prop="tuan">
        <el-input type="textarea"
          v-model="form.tuan"
          maxlength="2000"
          placeholder="请输入彖曰">
        </el-input>
      </el-form-item>
      <el-form-item label="彖曰解释"
        :style="{ width: '100%' }"
        prop="tuanDesc">
        <el-input type="textarea"
          v-model="form.tuanDesc"
          maxlength="2000"
          placeholder="请输入彖曰解释">
        </el-input>
      </el-form-item>

      <el-form-item label="Icon"
        :style="{ width: '100%' }"
        prop="icon">
        <ImageUpload :limit="1"
          v-model="form.icon" />
      </el-form-item>
      <el-form-item label="卦画"
        :style="{ width: '100%' }"
        prop="images">
        <ImageUpload :limit="1"
          v-model="form.images" />
      </el-form-item>
      <el-form-item label="备注"
        prop="remark"
        style="width: 100%;">
        <el-input type="textarea"
          v-model="form.remark"
          style="width: 100%;"
          maxlength="2000"
          placeholder="请输入备注">
        </el-input>
      </el-form-item>

      <YaoList v-if="this.form.guaId"
        :guaId="this.form.guaId" />
    </el-form>

    <div style="width: 100%;height: 64px;"></div>
    <div class="footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary"
        @click="submitForm">确 定</el-button>

    </div>
  </div>
</template>

<script>
import {
  divinationDetail,
  addDivination,
  updateDivination,
} from "@/api/divination/divination64.js";
import YaoList from './yaoList.vue'

export default {
  name: 'setGua',
  dicts: ["yj_guai_level", 'yj_ji_xiong'],
  data () {
    return {
      // 表单参数
      form: {
        guaId: null,
        name: null,
        breif: null,
        likes: null,
        icon: null,
        pinYin: null,
        nameDesc: null,
        level: null,
        lian: '',
        de: null,
        jiXiong: null,
        xiang: null,
        xiangDesc: null,
        ci: null,
        ciDesc: null,
        tuan: null,
        tuanDesc: null,
        yongJiu: null,
        images: null,
        remark: null,
      },
      // 表单校验
      rules: {
        guaId: [
          { required: true, message: '请输入卦ID', trigger: "blur" },
        ],
        name: [
          { required: true, message: '请输入卦名', trigger: "blur" },
        ]
      },
      optType: 'add'
    }
  },
  components: { YaoList },
  created () {
    if (this.$route.params && this.$route.params.guaId) {
      this.form.guaId = this.$route.params.guaId
      this.getDetial()
    }
  },
  methods: {
    /** 修改按钮操作 */
    getDetial () {
      divinationDetail(this.form.guaId).then((response) => {
        this.form = response.data;
        this.optType = 'edit'
      });
    },
    cancel () {
      const obj = { path: '/gua/divination64' };
      this.$tab.closeOpenPage(obj);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.optType == 'edit') {
            updateDivination(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功');
              this.cancel()
            });
          } else {
            addDivination(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功');
              this.cancel()
            });
          }
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background: #fff;
}
.form-box {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.04);
  z-index: 100;
}
</style>
